<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Google Maps API Example: Simple Geocoding</title>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDRxymu3G5nFQuVp3f573YfU3VvERK6tCk&sensor=false">
    </script>
    
    <script type="text/javascript">
		  var geocoder;
		  var map;
		  function initialize() {
		    geocoder = new google.maps.Geocoder();
		    var latlng = new google.maps.LatLng(-34.397, 150.644);
		    var myOptions = {
		      zoom: 8,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    }
		    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		  }
		
		  function showAddress() {
		    var address = document.getElementById("address").value;
		    geocoder.geocode( { 'address': address}, function(results, status) {
		      if (status == google.maps.GeocoderStatus.OK) {
		        map.setCenter(results[0].geometry.location);
		        var marker = new google.maps.Marker({
		            map: map,
		            position: results[0].geometry.location
		        });
		      } else {
		        alert("Geocode was not successful for the following reason: " + status);
		      }
		    });
      }
    </script>  
  </head>

  <body onload="initialize()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        Enter an address, and then drag the marker to tweak the location.
        <br/>
        The latitude/longitude will appear in the infowindow after each geocode/drag.
      </p>
      <p>
        <input type="text" style="width:350px" name="address" id="address"/>

        <input type="submit" value="Go!" onclick="showAddress()"/>
      </p>
      <div id="map_canvas" style="width: 600px; height: 400px"></div>
    </form>

  </body>
</html>